<template>
  <div class="app-container">
    <div class="filter-container mb20">
      社区：
      <el-select
        v-model="formdata.org_id"
        placeholder="全部"
        clearable
        class="filter-item"
        style="width: 150px"
        @change="org_change"
      >
        <el-option v-for="item in ext.org_listOptions" :key="item.id" :label="item.organ_name" :value="item.id" />
      </el-select>
      网格：
      <el-select v-model="formdata.grid_id" placeholder="请选择" clearable class="filter-item" style="width: 230px">
        <el-option v-for="item in ext.grid_listOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      小区名称：
      <el-input
        v-model="formdata.name"
        placeholder=""
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="search"
      />

      <el-button class="filter-item ml10" type="primary" icon="el-icon-search" @click="search">
        查询
      </el-button>
      <el-button class="filter-item ml10" type="warning" icon="el-icon-edit" @click="edit(0)">
        添加
      </el-button>
    </div>
    <div class="tbl-list">
      <el-table
        v-loading="tmp.listLoading"
        border
        fit
        highlight-current-row
        height="700"
        element-loading-text="Loading"
        :data="result.list"
      >
        <el-table-column align="center" label="编号" width="95">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>

        <el-table-column label="小区名称" min-width="110">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column label="所属社区" min-width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.organ_name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="所属网格" min-width="60" align="center">
          <template slot-scope="scope">
            {{ scope.row.grid_name }}
          </template>
        </el-table-column>

        <el-table-column label="联系人" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.contacts }}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系电话" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.tel }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="detail(scope.row)">查看</el-button>
            <el-button type="warning" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="result.total>0"
        style="float: right;"
        :total="result.total"
        :page.sync="formdata.pageindex"
        :limit.sync="formdata.pagesize"
        @pagination="load_data"
      />
    </div>
    <div class="dialog">
      <!-- 详情组件-->
      <el-dialog v-if="tmp.dialogType=='detail'&&tmp.dialogFormVisible" :close-on-click-modal="false" title="详情" :visible.sync="tmp.dialogFormVisible">
        <detail ref="detail" :detail-id="tmp.detailId" @dialogClose="dialogClose" />
      </el-dialog>
      <!-- 新增修改组件-->
      <el-dialog v-if="tmp.dialogType=='edit'&&tmp.dialogFormVisible" :close-on-click-modal="false" title="编辑" :visible.sync="tmp.dialogFormVisible">
        <edit ref="edit" :detail-id="tmp.detailId" @dialogClose="dialogClose" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index' // 分页secondary package based on el-pagination
import edit from './building-edit'
import detail from './building-detail'
export default {
  components: {
    Pagination,
    edit,
    detail
  },
  data() {
    return {
      formdata: {
        pageindex: 1,
        pagesize: 20,
        org_id: '',
        grid_id: '',
        id: 0

      },
      result: {
        total: 0,
        list: []
      },
      tmp: {
        detailId: 0,
        dialogType: '',
        dialogFormVisible: false, // 控制弹窗显示隐藏的值
        listLoading: true
      },
      ext: {
        org_listOptions: [],
        grid_listOptions: []
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        // console.log('query', query)
        // if (query) {
        //   this.redirect = query.redirect
        //   this.otherQuery = this.getOtherQuery(query)
        // }
      },
      immediate: true
    }
  },
  created() {
    this.get_org_list()
    this.load_data()
  },
  methods: {
    dialogClose() {
      this.resetTemp()
      this.tmp.dialogFormVisible = false
    },
    org_change(value) {
      console.log('value', value)
      /* 为网格列表取值*/
      for (const item of this.ext.org_listOptions) {
        if (item.id === value) {
          // console.log('item', item)
          this.ext.grid_listOptions = item.grid_list
        }
      }
    },
    get_org_list() {
      this.$api.comm.getorg_list().then(response => {
        // console.log('response', response)
        this.ext.org_listOptions = response.data
      }).catch(err => {
        console.log('err:' + err)
      })
    },
    load_data() {
      var that = this
      this.tmp.listLoading = true
      this.$api.project.projectlist(this.formdata).then(response => {
        // console.log('response', response)
        this.result.list = response.data.rows
        this.result.total = response.data.total
        this.tmp.listLoading = false
      }).catch(err => {
        that.tmp.listLoading = false
        console.log('err:' + err)
      })
    },
    resetTemp() {
      this.tmp.detailId = 0
    },
    search() { // 查询
      this.formdata.pageindex = 1
      this.load_data()
    },
    detail(row) { // 查看
      this.tmp.detailId = row.id
      this.tmp.dialogType = 'detail'
      this.tmp.dialogFormVisible = true
    },
    edit(row) { // 新增||修改
      this.tmp.dialogType = 'edit'
      this.tmp.detailId = row.id
      this.tmp.dialogFormVisible = true
    },
    del(row) { // 删除
      // console.log('row', row)
      const that = this
      this.$api.project.projectdelete({
        id: row.id
      }).then(() => {
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.search()
      }).catch(err => {
        that.tmp.listLoading = false
        console.log('err:' + err)
      })
    }
  }
}
</script>
